/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template>
  <view>
    <login-head></login-head>
    <view class="login-in">
      <view class="content30">
        <!-- 短信登录 -->
        <block v-if="!verificationLogin">
          <!-- <block class=""></block> -->
          <view class="lsu lsus">
            <!-- <view class="icon icon1"></view> -->
            <input
              type="text"
              class="text"
              placeholder-class="place"
              v-model="mobile"
              name="username"
              maxlength="16"
              id="username"
              value=""
              placeholder="请输入手机号码"
            >
          </view>
          <!-- 暂时注释 -->
          <view class="reg-tips">未注册的手机号验证后自动创建登录账号</view>
          <view
            class="validation-btn"
            :class="[isdefault?'validation-btn-select':'']"
            @tap="submitAddress"
          >获取短信验证码</view>
          <login-link
            :ishide="isSelect"
            @updateHide="updateHide"
          ></login-link>

        </block>
        <block v-if="verificationLogin">
          <view class="lsu lsus">
            <!-- <view class="icon icon1"></view> -->
            <input
              type="text"
              placeholder-class="place"
              v-model="mobile"
              class="text"
              name="username"
              id="username_2"
              value=""
              placeholder="请输入账号/手机号"
            >
            <view
              class="tips"
              v-show="mobileTips"
            >
              <image
                :src="imgUrl+'user/tishi_1.png'"
                mode=""
              ></image>
              <text>{{mobileText}}</text>
            </view>
          </view>
          <view class="lsu lsus">
            <!-- <view class="icon icon2"></view> -->
            <input
              v-show="!ishide"
              placeholder-class="place"
              type="password"
              maxlength="16"
              v-model="password"
              class="text"
              name="password"
              id="password"
              value=""
              placeholder="请输入密码"
            >
            <input
              v-show="ishide"
              placeholder-class="place"
              type="text"
              maxlength="16"
              v-model="password"
              class="text"
              name="password"
              id="password"
              value=""
              placeholder="请输入密码"
            >
            <text
              class="eye"
              :style="{backgroundImage: 'url('+imgUrl+'user/eye.png)'}"
              :class="[ishide==false?'eyeopen':'']"
              @tap="changenEye"
            ></text>
            <navigator
              url="/pages/user/forgotPassword/forgotPswProcess-1"
              class="ya_mima"
            ><b></b> 忘记密码</navigator>
            <view
              class="tips"
              v-show="passwordTips"
            >
              <image
                :src="imgUrl+'user/tishi_1.png'"
                mode=""
              ></image>
              <text>{{passwordText}}</text>
            </view>
          </view>
          <!-- 验证码 暂时注释 -->
          <view class="lsu test lsus">
            <input
              class="text"
              v-model="verification"
              maxlength="16"
              type="text"
              name="verify_code"
              id="verify_code_2"
              value=""
              placeholder="验证码"
            >
            <view
              @tap="verify"
              id="verify_code_img"
            >
              <image :src="codeUrl"></image>
            </view>
          </view>
          <view
            class="validation-btn login-btn"
            :class="[LoginShow?'validation-btn-select':'']"
            @tap="submitAddress"
          >登录</view>
          <login-link
            :ishide="isSelect"
            @updateHide="updateHide"
          ></login-link>
        </block>

      </view>
      <!-- 老版本注释 -->

      <!-- <view class="signup-find p">
        <view class="note fl">
          <navigator url="/pages/user/reg/reg"><text>快速注册</text></navigator>
        </view>
        <view
          class="note fr"
          @tap="toogleLogin"
        >
          <view class="sign_password"><text>{{!verificationLogin?"账号密码登录":"短信验证码登录"}}</text></view>
        </view> -->

      </view>
      <!-- 开源提示 -->
      <block v-if="openFlag">
        <view class="openlabel">手机号:13800138006</view>
        <view class="openlabel">登陆密码:soubao2020</view>
      </block>
	  
      <view
        class="toggle"
        @tap="toogleLogin"
      >{{!verificationLogin?"账号密码登录":"验证码登录"}}</view>
      <view class="other">
        <view class="title ">其他登录方式</view>
        <view class="box">
          <block
            v-for="(item,index) in loginType"
            :key="index"
          >
            <view
              @tap="otherLogin"
              :data-type="item.type"
            >
              <image :src="item.img"></image>
              <view class="text">{{item.text}}</view>
            </view>
          </block>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  login,
  verification,
  postLoginCode,
  getUserInfo,
  getWxUserInfo,
  sendSms,
  wechatGetInfo,
  getBindInfo
} from "@/api/api.js";
import loginLink from "./components/login-link.vue";
import loginHead from "./components/login-head.vue";
import config from "@/api/config.js";
import sendSmsMixin from "@/mixin/sendSms.js";
import Md from "md5";
import common from "@/common/common.js";
import getAppid from "@/mixin/getAppid.js";
import pay from "@/common/pay.js";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      hostUrl: config.host,
      imgUrl: config.imgUrl,
      mobile: "", //手机
      mobileTips: false, //手机号提示
      passwordTips: false, //密码提示
      mobileText: "",
      verification: "", //图片验证码
      passwordText: "",
      password: "", //密码
      code: "", //短信验证码
      password2: "", //第二次输入
      verificationImg: "", //图片验证码
      ishide: false,
      is_send: true, //是否发送短信
      codeUrl: "/user/verification",
      verificationLogin: false, //验证码登录
      countDownNum: "60", //短信验证码倒计时
      timer: "", //
      scene: 6, //6身份验证 短信验证码登录
      loginType: [
        { text: "微信", type: 0, img: config.imgUrl + "common/wx.png" },
      ],
      isFlag:false,
      isSelect: true,
    };
  },
  mixins: [sendSmsMixin, getAppid],
  components: {
    loginLink,
    loginHead,
  },
  computed: {
    ...mapState(["openFlag"]),
    LoginShow() {
      if (this.mobile && this.password && this.verification && !this.isSelect) {
        return true;
      } else {
        return false;
      }
    },
    isdefault() {
      if (!this.verificationLogin && this.mobile && !this.isSelect) {
        return true;
      } else {
        return false;
      }
    },
  },
  onLoad(options) {
    /*图片验证码部分暂时注释*/
    if(options.flag){
      this.isFlag=options.flag
    }
    this.verify();
    if (process.env.NODE_ENV === "development") {
      // 为了开源 默认账号密码登陆
      this.mobile = "13800138006";
      this.password = "soubao2020";
      this.verificationLogin = true;
    //   this.updateOpenFlag(true);
  }
  if( this.isFlag){
    	const getUrlParam = (name) => {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
    };
    if (getUrlParam("code") != null) {
    let data = {
      code: getUrlParam("code"),
    };
    this.getWxUserInfo(data);
    }
  }

  },
  methods: {
    ...mapMutations(["login", "getToken", "updateOpenFlag"]),
    ...mapActions(["getUser"]),
    submitAddress() {
      if (this.isSelect) {
        return common.toast("none", "请勾选登录协议");
      }
      if (!this.mobile) {
        return common.toast("none", "手机号不能为空");
      }

      /* verificationLogin = true  为短信验证码登录 */

      if (!this.verificationLogin) {
        this.getCode();

        let params = {
          mobile: this.mobile,
          code: this.code,
        };
      } else {
        if (!/^1[3456789]\d{9}$/.test(this.mobile) && this.mobile != "") {
          this.mobileTips = true;
          this.mobileText = "手机格式有误";
          return false;
        }
        if (this.mobile == "" || this.password == "") {
          this.mobileTips = true;
          this.passwordTips = true;
          this.mobileText = "手机号不能为空!";
          this.passwordText = "密码不能为空!";
        }
        if (this.verification == "") {
          common.toast("none", "图片验证码不能为空", 2000);
          return false;
        }
        let password = Md("TPSHOP" + this.password);

        let params = {
          mobile: this.mobile,
          password: password,
          verification: this.verification,
        };
        this._login(params);
      }
    },
    /*登录*/

    _login(params) {
      login(params)
        .then((res) => {
          if (res) {
            if (!res.msg) {
              getApp().globalData.userInfo = res;
              /* token = token_type + access_token
               */

              // this.login(res)
              console.log(res);
              let token = res.token_type + res.access_token;
              this.getToken(token);
              let loginInfo = {
                token: res.token_type + res.access_token,
                user_id: res.user_id,
              };
              uni.setStorageSync("userInfo", res);
              uni.setStorageSync("loginInfo", loginInfo);
              /*登录成功 调用户信息*/

              this.getUser();

              common.toast("none", "登录成功", 2000);

              setTimeout(this.jump, 1000);
            }
          }
        })
        .catch((error) => {
          this.verify();
        });
    },
    /*切换图片验证码*/
    verify() {
      verification().then((res) => {
        // console.log(res)
        this.codeUrl = res;
      });
    },
    /*短信验证码登录*/
    postLoginCode(params) {
      postLoginCode(params).then((res) => {
        console.log(res);
        if (res.stauts != 1) {
          return common.model(res.msg);
        }
        getApp().globalData.userInfo = res;
        /* token = token_type + access_token
         */

        let loginInfo = {
          token: res.token_type + res.access_token,
          user_id: res.user_id,
        };
        uni.setStorageSync("userInfo", res);
        uni.setStorageSync("loginInfo", loginInfo);
        common.toast("none", "登录成功", 2000);
        setTimeout(this.jump, 1000);
      });
    },
    getCode() {
      var that = this;
      if (!that.mobile) {
        return common.toast("none", "手机号不能为空");
      }
      if (!/^1[3456789]\d{9}$/.test(that.mobile) && that.mobile != "") {
        common.toast("none", "手机格式有误", 2000);
        return false;
      }
      // 短信验证码接口待定
      that.is_send = false;
      let params = {
        mobile: this.mobile,
        scene: this.scene,
      };
      let url = `/pages/user/login/validation/validation?tell=${this.mobile}`;
      that.sendSms(params, url); //发送短信
    },
    // 监听子组件  勾选 登录协议
    updateHide(e) {
      this.isSelect = e;
    },
    // 明文密码
    changenEye() {
      this.ishide = !this.ishide;
    },
    //跳转
    jump() {
      common.jump(1);
    },
    /* 切换登录方式 */

    toogleLogin() {
      this.verificationLogin = !this.verificationLogin;
    },
    otherLogin(e) {
      console.log(e);
      let type = e.currentTarget.dataset.type;
      if (type == 0) {
        //微信公众号登录
        if (pay.isWechat()) {
          let protocol = window.location.protocol; //协议
          // console.log(protocol);
          let host = protocol + "//" + window.location.host+'/h5';
          // console.log(window.location.host);
          let appId = this.appInfo.appid; //公众号appid
          let order_sn = this.master_order_sn || this.order_sn;
          this.isFlag=true;
          let redirectUrl = `${host}/#/pages/user/login/login?flag=${this.isFlag}`
          let url = encodeURIComponent(redirectUrl);
          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
        } else {
        }
      }
	},
	/*获取 open_id*/ 
	getWxUserInfo(params) {
      getWxUserInfo(params).then((res) => {
        console.log(res);
        if(res.open_id){
			// alert("获取open_id")
			// alert(res.open_id)
			let data={
				oauth:'weixin',
				openid:res.open_id
			}
			
			// this.getBindInfo(data)
			return data
        }
        
      }).then(data=>{
		console.log(data);
		/*查询是否绑定第三方信息*/ 
		getBindInfo(data).then(res=>{
			if(res){
				this._login(data)
			}else{
				/*跳转绑定*/ 
				uni.reLaunch({
					url:'/pages/user/login/bindLogin/bindLogin'
				})
			}
		})
	  })
	},
	

  },
  
};
</script>

<style lang="scss">
page {
  background: #fff;
}

.reg-tips {
  margin-top: 26rpx;
  margin-bottom: 60rpx;
  color: #999999;
  font-size: 24rpx;
}
.validation-btn {
  width: 610rpx;
  height: 90rpx;
  margin-bottom: 30rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 135, 135, 1) 0%,
    rgba(255, 157, 138, 1) 100%
  );
  border-radius: 45rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30rpx;
}
.validation-btn-select {
  background: linear-gradient(
    90deg,
    rgba(255, 59, 59, 1) 0%,
    rgba(255, 93, 61, 1) 100%
  );
}
// .link{
// 	.icon-select{
// 		width:36rpx;
// 		height:36rpx;
// 		background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,93,61,1) 100%);
// 		border-radius:5rpx;
// 	}
// 	display: flex;
// 	flex-direction: row;
// 	align-items: center;
// 	justify-content: flex-start;
// 	color: #999999;
// 	font-size: 24rpx;
// 	.icon{
// 		width: 36rpx;
// 		height: 36rpx;
// 		border:1rpx solid rgba(204,204,204,1);
// 		border-radius:5rpx;
// 		margin-right: 22rpx;
// 	}
// 	.text{
// 		color: #666666;
// 	}
// }

.toggle {
  margin-top: 86rpx;
  color: #ff3b3b;
  font-size: 24rpx;
  text-align: center;
}
.other {
  position: relative;
  bottom: -96rpx;
  width: 100%;
  .title {
    color: #999999;
    font-size: 24rpx;
    text-align: center;
    position: relative;
    margin-bottom: 64rpx;
  }
  .title::before,
  .title::after {
    content: "";
    width: 120rpx;
    height: 1rpx;
    background: #ccc;
    position: absolute;
    top: 50%;
  }
  .title::before {
    left: 135rpx;
  }
  .title::after {
    right: 135rpx;
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }
    .text {
      margin-top: 9rpx;
      text-align: center;
      color: #999999;
      font-size: 24rpx;
    }
  }
}
.login-btn {
  margin-top: 60rpx;
}
.login-in {
  // margin-top: 90rpx;
}

.content30 {
  margin: 0 70rpx;

  .lsu {
    display: flex;
    align-items: center;
    height: 75rpx;
    line-height: 75rpx;
    padding-top: 40rpx;
    border: none;
    position: relative;
    justify-content: space-between;

    input.text {
      height: 75rpx;
      width: 100%;
      border: none;
      border-bottom: 1px solid #dbdbdb;
      border-right: 1px solid #fff;
      padding-left: 0;
      padding-right: 0.213333rem;
      font-size: 0.554667rem;
      background-color: #fff;
      box-sizing: border-box;
      justify-content: space-between;
      font-size: 40rpx;
    }

    .lsus {
      display: flex;
      align-items: center;
      height: 2.4533rem;
      line-height: 2.45333rem;
      padding-top: 0.8rem;
      border: none;
      position: relative;
      justify-content: space-between;
    }

    .cold_1 {
      position: absolute;
      bottom: 30rpx;
      right: 0;
      width: 144rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 0.469333rem;
      background: none;
      color: #ff3939;
      border: 1px solid #ff3939;
      border-radius: 50rem;
      display: block;
      padding: 0;
      text-align: center;
    }
  }
}
.openlabel {
  color: #333;
  font-size: 30rpx;
  padding: 0 70rpx;
}
// .icon {
// 	float: left;
// 	width: 40rpx;
// 	height: 40rpx;
// 	background-image: url("user/ico-login-m.png");
// 	background-repeat: no-repeat;
// 	background-size: 40rpx 280rpx;
// 	margin-right: 0.4rem;
// }

// .icon1 {}

.icon2 {
  background-position: 0 -40rpx;
}
.icon3 {
  background-position: 0 -80rpx;
}
.submit-btn {
  width: 100%;
  height: 80rpx;
  color: #fff;
  background-color: #ff3939;
  margin-top: 44rpx;

  border-radius: 40rpx;
  box-sizing: border-box;
  font-size: 30rpx;
}

.signup-find {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  margin: 20rpx 98rpx 0;
  padding-top: 20rpx;
  font-size: 24rpx;
}
.eye {
  width: 40rpx;
  height: 24rpx;
  // background-image:url("user/eye.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  right: 130rpx;
  top: 64rpx;
  cursor: pointer;
  background-position: 0;
}
.eyeopen {
  background-position: -40rpx 0;
}

.ya_mima {
  position: absolute;
  bottom: 22rpx;
  right: 0.1rem;
  width: 113rpx;
  font-size: 0.46933rem;
  color: #333333;
  height: 30rpx;
  align-items: center;
  text-align: right;
  line-height: 30rpx;
  display: inline-block;
  b {
    width: 1px;
    height: 0.42667rem;
    background: #cfcfcf;
    float: left;
    margin-top: 8rpx;
  }
}
#verify_code_img {
  width: 140rpx;
  height: 60rpx;
  position: absolute;
  bottom: 0.53333rem;
  right: 0.32rem;
  image {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
}
.note {
  color: #222;
  font-size: 26rpx;
}
.tips {
  position: absolute;
  left: 62rpx;
  top: 94rpx;
  image {
    vertical-align: top;
    margin-top: 30rpx;
    width: 24rpx;
    height: 24rpx;
  }
  text {
    margin-left: 8rpx;
    color: #ff3939;
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
  }
}
.place {
  font-size: 32rpx;
}
</style>
